<html>
<head>
<style>
@import url(http://fonts.googleapis.com/css?family=Iceland);
@import url(http://fonts.googleapis.com/css?family=Squada+One);

body { text-align: center; font-family: "Squada one"; background: url(http://us.123rf.com/400wm/400/400/print2d/print2d1112/print2d111200001/11533906-set-of-coffee-on-a-checkerboard-background-in-shades-of-brown.jpg); }

#dimmer { background: rgba(128, 128, 128, 0.5); padding-bottom:164px }

.wrapper { display: inline-block; margin-top: 100px; padding: 16px;  box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
transition: padding 0.3s, font-size 0.3s;
	opacity: 0.7;
}

.wrapper:hover { font-size: 2em; opacity: 1.0 }

.wrapper.light { background: rgba(255, 255, 225, 0.8); }
.wrapper.dark { background: rgba(30, 0, 0, 0.8); color: #fff; margin-top:70px }

.wrapper span { padding: 8px; display: inline-block }

button { 
	transition: padding 0.3s, background-color 0.3s;
	padding: 8px;
	border: 0px;
	box-shadow:
		inset 0 2px 0px rgba(255, 255, 255, 0.2),
		inset 0 -4px 0px rgba(0, 0, 0, 0.2);
	vertical-align: top;
}

button:hover { padding: 20px 8px !important; background: #eee !important; color: #222 !important }


button.facebook { background: #3B5998; color: #fff; }

button.twitter { background: #00ABEC; color: #fff; }

button.embeded { background: #9239aa; color: #fff; }

button.internal { background: #a00; color: #fff }
</style>
</head>
<body>
<div id="dimmer">
<div class="wrapper light">
	<p>play using</p>
	<button class="facebook">facebook</button>
	<button class="twitter">twitter</button>
	<button class="embeded">login</button>
	<span>or</span>
	<button class="internal">JUST GO!</button>
</div>

<p></p>

<div class="wrapper dark">
	<p>play using</p>
	<button class="facebook">facebook</button>
	<button class="twitter">twitter</button>
	<button class="embeded">login</button> 
	<span>or</span>
	<button class="internal">JUST GO!</button>
</div>
</div>
</body>
</html>